<template>
  <page-header-wrapper>
    <a-card>
      <GzSearchForm
        :searchConditionNum="6"
        :searchFunc="searchFunc"
        :resetFunc="() => searchData = {}"
      >
        <gz-text-up v-model:value="searchData['title']" :placeholder="'标题'" />
      </GzSearchForm>

      <!-- 列表渲染 -->
      <GzTable
        ref="infoTable"
        :init-data="true"
        :req-table-data-func="reqTableDataFunc"
        :table-columns="tableColumns"
        :search-data="searchData"
        row-key="sysQaId"
      >
        <template #topBtnSlot>
          <a-button v-if="$access('ENT_QA_CONT_ADD')" type="primary" class="mg-b-30" @click="addFunc">
            <plus-outlined />
            新建
          </a-button>
        </template>
        <template #bodyCell="{ column, record }">
          <template v-if="column.key === 'op'">
            <!-- 操作列插槽 -->
            <GzTableColumns>
              <a-button v-if="$access('ENT_QA_CONT_EDIT')" type="link" @click="editFunc(record)">修改</a-button>
              <a-button v-if="$access('ENT_QA_CONT_DEL')" danger type="link" @click="delFunc(record)">删除</a-button>
            </GzTableColumns>
          </template>
        </template>
      </GzTable>
    </a-card>
  </page-header-wrapper>
  <!-- 新增修改 -->
  <AddOrEdit ref="addOrEditRef" :callbackFunc="() => infoTable.refTable(false)" />
</template>
<script setup lang="ts">
import { reactive, ref, getCurrentInstance } from 'vue'
import { $getQaList, $editQa } from '@/api/sysManage/qaManage/index'
import AddOrEdit from '@/views/sysManage/qaManage/qaList/AddOrEdit.vue'


const { $infoBox, $access } = getCurrentInstance()!.appContext.config.globalProperties

const searchData = ref({})
const infoTable = ref()
const addOrEditRef = ref()

const tableColumns = reactive([
  { key: 'sort', title: '排序', dataIndex: 'sort', width: 70, fixed: 'left' },
  { key: 'typeName', title: '类别', dataIndex: 'typeName', width: 70 },
  { key: 'title', title: '标题', dataIndex: 'title', width: 150 },
  { key: 'content', title: '内容', dataIndex: 'content', width: 260 },
  { key: 'op', title: '操作', width: 260, fixed: 'right', align: 'center' }
])

// 请求table接口数据
function reqTableDataFunc(params){
  return $getQaList(params)
}
// 查询
function searchFunc() {
  infoTable.value.refTable(true)
}
// 新增
function addFunc() {
  addOrEditRef.value.show()
}
// 修改
function editFunc(record) {
  addOrEditRef.value.show(record)
}
// 删除
function delFunc(record) {
  $infoBox.confirmDanger('确认删除？', '请确认是否删除当前QA信息？', async () => {
    await $editQa({ ...record, isDeleted: 1 })
    $infoBox.message.success('删除成功')
    infoTable.value.refTable()
  })
}
</script>